<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: 50px;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        white-space: nowrap;
    }
    .select-item {
        text-align: right;
    }
</style>

<template>
    <div class="department">
        <form class="layui-form " >

            <div  class="layui-col-lg4 select-item" >
                <div class="layui-inline" style="width: 200px">
                    <input type="text" name="starttime" v-model="starttime" id="starttime" placeholder="请选择开始时间" autocomplete="off" class="layui-input key">
                </div>
                <div class="layui-inline" style="width: 200px">
                    <input type="text" name="endtime" v-model="endtime" id="endtime"  placeholder="请选择结束时间" autocomplete="off" class="layui-input key">
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select   v-model="srguid" name="srguid"  id="srguid"  lay-filter="storeroom"  placeholder="请选择库房"   class="layui-form-select"   >
                        <option value="" >请选择库房</option>
                        <option v-for="item in storeroom" :value="item.guid" >{{item.name}}</option>
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select name="status" v-model="status" id="status"   class="layui-form-select"   >
                        <option value="" >请选择状态</option>
                        <option v-for="item in statusList" :value="item.dictkey" >{{item.dicttext}}</option>
                    </select>
                </div>
                <button type="button" class="layui-btn sou" @click="search">搜索</button>
                <!--                <button type="button" class="layui-btn sou" @click="exportExcel">导出excel</button>-->
            </div>

        </form>
        <div style="width: 100%;overflow: auto;margin-bottom: 10px;" id="textarea">
            <table class="layui-table layui-form" >
                <!--                -->
                <thead>
                <tr>
                    <th>货品工厂 </th>
                    <th>库房 </th>
                    <th>领料单编号</th>
                    <th>领料时间</th>
                    <th>出库品种</th>
                    <th>出库规格</th>
                    <th>出库重量</th>
                    <th>入库品种</th>
                    <th>入库规格</th>
                    <th>入库重量</th>
                    <th>退料重量</th>
                    <th>报废重量</th>
                    <th>损耗重量</th>
                    <th>状态</th>
                </tr>
                </thead>
                <tbody>
                <template v-for="(item) in afterList" >
                    <tr class="id9"  v-for="(row, i) in item" >
                        <td v-if="i === 0" :rowspan="item.length">{{row.factory}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.storeroom}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.picklistCode}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.pickingdate}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.product}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.outSpename}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.outWeight}}</td>
                        <td>{{row.inProduct}}</td>
                        <td>{{row.inSpename}}</td>
                        <td>{{row.inWeight}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.returnWeight}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.scrapWeight}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.lossWeight}}</td>
                        <td v-if="i === 0" :rowspan="item.length">{{row.statusname}}</td>
                    </tr>
                </template>
                <tr id="fixrow" v-if="listdata.reports != undefined  && listdata.reports.rows.length > 0">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>{{listdata.allOutWeight}}</td>
                    <td></td>
                    <td></td>
                    <td>{{listdata.allInWeight}}</td>
                    <td>{{listdata.allReturnWeight}}</td>
                    <td>{{listdata.allScrapWeight}}</td>
                    <td>{{listdata.allLossWeight}}</td>
                    <td></td>
                </tr>
                </tbody>
            </table>

        </div>
        <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage" ></Pagination>
    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'

    export default {
        name: 'DispatchReport',
        components: {Pagination},
        data () {
            return {
                statusList: [],
                storeroom:[],
                starttime:"",
                endtime:"",
                srguid:"",
                listdata:{},
                exportpage:1,
                othercondition:"",
                byday: '',
                showCompany: false,
                afterList: [],
                status: '',
                currentPage: 1,
                totalPage: 0
            }
        },
        mounted() {
            let that = this;
            this.getRooms();
            this.getStatus();

            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;
                form.on('select(storeroom)', function(data){

                    $("#shrguid").empty();
                    $('#shrguid').append(new Option('请选择', ""));// 下拉菜单里添加元素。
                    $.each(that.storehouseroom, function (index, item) {
                        if(item.storeguid == data.value){
                            $('#shrguid').append(new Option(item.name , item.guid));// 下拉菜单里添加元素。
                        }
                    });
                    layui.form.render("select");
                });

                // form.on('select',function(data){
                //     that[data.elem.name] = data.elem.value;
                // })
            });
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#starttime', //指定元素
                    // value: that.getNowMonthDate()
                });
                //执行一个laydate实例
                laydate.render({
                    elem: '#endtime', //指定元素
                    // value: that.getDate(-1)
                });
            });
        },
        updated: function () {
            layui.form.render();
        },
        methods: {
            //获取当前日期
            getDate: function (dayCount = 0) {
                var dd = new Date();
                dd.setDate(dd.getDate()+dayCount);//设置日期
                var y = dd.getFullYear();
                var m = dd.getMonth()+1;//获取当前月份的日期
                var fullM = m.length == 2 ? m : '0' + m;
                var d = dd.getDate();
                return y+"-"+fullM+"-"+d;
            },
            //获取本月第一天
            getNowMonthDate: function () {
                var date = new Date();
                var year = date.getFullYear() + "";
                var month = (date.getMonth() + 1) + "";
                // 本月第一天日期
                var begin = year + "-" + month + "-01"
                return begin;
            },
            search: function() {
                this.getPageData('search');
            },
            turnPage: function(data){
                this.currentPage = data;
                this.getPageData();
            },
            getPageData: function(type = '') {
                var that = this;

                this.starttime = $('#starttime').val();
                this.endtime = $('#endtime').val();
                this.srguid = $('#srguid').val();
                this.status = $('#status').val();

                let loader = layui.layer.load();
                let postData = {};
                if (type != 'search') {
                    postData.pageNo = that.currentPage;
                }
                postData.startDate = this.starttime;
                postData.endDate = this.endtime;
                postData.srmid =  this.srguid;
                postData.status =  this.status;

                $.ajax({
                    url: '/repository/ProduceReposit!produceReport.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function(res) {
                        if (res.msg == 'success') {
                            //分页数据赋值
                            that.currentPage = res.reports.pageNo;
                            that.totalPage = res.reports.pageCount;

                            that.listdata = res;
                            that.tansList();
                        } else {
                            that.toastError("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                        $('#textarea').css('max-height', $(window).height() - $('#textarea').offset().top - 10)
                    }
                });
            },
            getRooms: function() {
                let postData = {functionTypes: 8};
                let that = this;
                $.ajax({
                    url: '/sales/Salespermission!getPermisForStore.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function(res) {
                        if (res.msg == 'true') {
                            that.storeroom = res.storeroom;
                        } else {
                            that.toast('获取库房数据失败！');
                        }
                    }
                });

            },
            getStatus: function() {
                let that = this;
                this.axios({
                    method: 'get',
                    responseType: 'json',
                    url: '/sales/Sellform!findDict.action',
                    params: {type: 27}
                }).then(response => {
                    if (response.statusText == "OK") {
                        that.statusList = response.data;
                    } else {
                        this.toastText('获取状态数据失败');
                    }
                });
            },
            // 数据转换
            tansList: function () {
                this.afterList = Object.values(this.listdata.reports.rows.reduce((temp, item) => {
                    if( temp[item.picklistCode] ) {
                        temp[item.picklistCode].push(item)
                    }else {
                        temp[item.picklistCode]  = [item]
                    }
                    return temp
                },{}))
            },
            compare: function (property){
                return function(a,b){
                    var value1 = a[property];
                    var value2 = b[property];
                    return value1 - value2;
                }
            },
            exportExcel:function (){
                var that = this;
                let postData = {};
                postData.startDate = $('#starttime').val();
                postData.endDate = $('#endtime').val();
                postData.srmid =  $('#srguid').val();
                postData.status =  $('#status').val();

                //window.location.href="/repository/RptStoreanalysis!exportOrderData.action?starttime=" + that.starttime + "&endtime=" + that.endtime + "&srguid=" + that.srguid   + "&othercondition=" + that.othercondition +  "&byday=" +  postData.byday
            },
        }
    }
</script>
